import { Drawer, DrawerInstance } from "@arco-design/web-vue";
import { FunctionalComponent } from "vue";

type Props = Omit<DrawerInstance["$props"], "visible">;
type UseDrawerReturn = [
  FunctionalComponent<Props>,
  {
    setDrawerVisible: (visible: boolean) => void;
  }
];

export default function useNewDrawer(): UseDrawerReturn {
  const drawerVisible = ref(false);

  const setDrawerVisible = (visible: boolean) => {
    drawerVisible.value = visible;
  };

  const CustomDrawer: FunctionalComponent<Props> = (props, { slots }) => {
    const internalProps: Props = {
      width: 540,
    };
    const _props = {
      ...internalProps,
      ...props,
    };
    return (
      <Drawer
        visible={drawerVisible.value}
        onUpdate:visible={(value) => (drawerVisible.value = value)}
        v-slots={slots}
        {..._props}
      />
    );
  };

  return [CustomDrawer, { setDrawerVisible }];
}
